<template>
  <div class="bcbkgame">
    <div class="headerhh">
      <div @click="goBack"
           style="float: left; height: 0.98rem;">
        <a-icon type="left"
                class="icon" />
        <a class="h3">别踩白块</a>
      </div>
    </div>
    <h1 id="score"
        v-show="!failflag">0</h1>
    <h1 class="fail"
        v-show="failflag">{{message}}</h1>
    <div id="main">
      <div id="container"></div>
    </div>
    <div id="restart"
         class="restart"
         @click="restartClick">
      <span>重新开始</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      clock: null, // 定时器操作句柄
      state: 0, // 0初始化,1进行中, 2 暂停, 3失败
      speed: 4,
      failflag: false,
      message: ''
    }
  },
  inject: ['reload'],
  mounted () {
    this.init()
    this.start()
  },
  methods: {
    goBack: function () {
      this.$router.go(-1)
    },
    restartClick: function () {
      this.reload()
    },
    /* 初始化 */
    init () {
      for (let i = 0; i < 4; i++) {
        this.crow()
      }

      this.$('main').onclick = (ev) => {
        this.judge(ev)
      }
    },

    judge (ev) {
      if (this.state === 3) {
        // alert('失败者禁入')
        this.failflag = true
        this.message = 'o(╯□╰)o，计算机赢了，继续加油哦！'
        return
      }
      if (ev.target.className.indexOf('black') === -1) {

      } else {
        ev.target.className = 'cell'
        ev.target.parentNode.pass = 1
        this.score()
      }
      // console.log(ev.target);
    },

    // start() 启动
    start () {
      this.clock = window.setInterval(this.move, 40)
    },

    // 动画
    move () {
      let con = this.$('container')
      let top = parseInt(window.getComputedStyle(con, null)['top'])

      if (this.speed + top > 0) { // 一步会走过头,直接top=0
        top = 0
      } else {
        top += this.speed // 调节每次下降的像素
      }

      con.style.top = top + 'px'

      //

      if (top === 0) {
        this.crow()
        con.style.top = '-100px'
        this.drow()
      } else if (top === (-100 + this.speed)) {
        // console.log(con.lastChild);
        let rows = con.childNodes
        if ((rows.length === 5) && (rows[rows.length - 1].pass !== 1)) {
          this.fail()
        }
      }
    },

    // 加速函数
    jiasu () {
      this.speed += 2
      if (this.speed === 20) {
        // alert('你的电脑太卡了')
        this.failflag = true
        this.message = '你的电脑太卡了'
      }
    },

    // 输,结束
    fail () {
      clearInterval(this.clock)
      this.state = 3
      // alert('结束')
      this.failflag = true
      this.message = 'o(╯□╰)o，计算机赢了，继续加油哦！'
    },

    // 计分
    score () {
      let newscore = parseInt(this.$('score').innerHTML) + 1
      this.$('score').innerHTML = newscore
      if (newscore % 10 === 0) {
        this.jiasu()
      }
    },

    // 创建div.row
    crow () {
      let con = this.$('container')
      let row = this.cdiv('row')
      let classes = this.createSn()

      for (let i = 0; i < 4; i++) {
        row.appendChild(this.cdiv(classes[i]))
      }

      if (con.firstChild == null) {
        con.appendChild(row)
      } else {
        con.insertBefore(row, con.firstChild)
      }
    },

    // 删除最后一行
    drow () {
      let con = this.$('container')
      if (con.childNodes.length === 6) {
        con.removeChild(con.lastChild)
      }
    },

    // 创建div,className是其类名
    cdiv (className) {
      let div = document.createElement('div')
      div.className = className
      return div
    },

    // 返回1个数组,随机其中1个单元,值为'cell black',其他3个,皆为cell
    createSn () {
      let arr = ['cell', 'cell', 'cell', 'cell']
      let i = Math.floor(Math.random() * 4)
      arr[i] = 'cell black'

      return arr
    },

    // 按id获取对象
    $ (id) {
      return document.getElementById(id)
    }
  }
}
</script>

<style lang="stylus" scoped>
.headerhh {
  height: 0.98rem;
  text-align: justify;
  line-height: 0.98rem;
  padding-left: 0.3rem;
  background: #27ae9e;
}

.icon {
  font-size: 0.36rem;
  color: #fff;
  // vertical-align: -0.23rem;
  vertical-align: -0.06rem;
}

.h3 {
  display: inline-block;
  font-size: 0.36rem;
  color: #fff;
}

.fail {
  text-align: center;
  font-size: 0.3rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-weight: bold;
}

#restart {
  text-align: center;
  margin: 0.6rem 0 0 0;
}

#restart span {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #27ae9e;
  border-radius: 5px;
  cursor: pointer;
}
</style>
